<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单标签</title>
</head>

<body>
  <!-- 
    表单标签应用的场景:
    登录/注册/收集用户信息/搜索...
    常用的标签: 输入框/单选/多选/下拉框
  -->
  <form action="#">
    <div>
      <span>姓名: </span>
      <input name="username" type="text" placeholder="请输入姓名">
    </div>
    <div>
      <span>密码:</span>
      <input name="password" type="password" placeholder="请输入密码">
    </div>
    <div>
      <span>测试</span>
      <input type="text" placeholder="测试">
    </div>
    <div>
      <span>性别:</span>
      <input name="gender" type="radio" value="男">男
      <input name="gender" type="radio" value="女">女
    </div>
    <div>
      <span>爱好:</span>
      <input name="hobby" type="checkbox" value="篮球">篮球
      <input name="hobby" type="checkbox" value="足球">足球
      <input name="hobby" type="checkbox" value="台球">台球
    </div>
    <div>
      <span>出生日期:</span>
      <input name="birthday" type="date" placeholder="请选择出生日期">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea name="intro" placeholder="请描述你的优点"></textarea>
    </div>
    <div>
      <!-- 
      <button>提交</button>
      <button>重置</button> 
      -->
      <input type="submit" value="提交信息">
      <input type="reset" value="重置表单">
    </div>
  </form>
</body>

</html>